<template>
    <div class="my"> 
        <div class="bj">
               <van-icon @click="onClickRight" class="icon-right" name="setting-o" />
            <div class="m-bj">
                <img src="../../assets/images/pikaqiu.jpg" alt="">
                <div class="bianji" v-if="userinfo">
                    <p>     {{userinfo.username}}/ {{userinfo.phone}}</p>
                    <a href="">编辑资料</a>
                </div>
            </div>
            <div class="nums">
                <div class="nums-l">
                    <p>0</p>
                    <p>粉丝</p>
                </div>
                <div class="nums-r">
                    <p>0</p>
                    <p>关注</p>
                </div>
            </div>
        </div>

        <div class="order">
            <van-nav-bar
               
                left-text="我的订单"
                right-text="全部订单"
            
                
                />
                <van-grid
             
                >
                    <van-grid-item  icon="pending-payment" text="待付款" />
                    <van-grid-item icon="idcard" text="待发货" />
                    <van-grid-item icon="logistics" text="待收货" />
                    <van-grid-item icon="comment-o" text="待评价" />
                </van-grid>
        </div>

        <div class="abcd">
            <img src="../../assets/images/abcd.jpg" alt="">
        </div>

            <van-button v-if="appphone" class="logout-btn" @click="confirmLogou">退出登录</van-button>
    </div>
</template>

<script>
import axios from "axios"
import {Dialog} from "vant"
export default {
    data(){
        return{
            
        }
    },
    mounted(){
        axios.get("http://localhost:3000/list")
        .then(res=>{
            console.log(res);
        })
        if(!this.appphone){
            this.$router.push({name:'login'})
        }
    
        if(this.appphone){
            this.$ajax.getuserinfo({
                phone:this.appphone
            })
            .then(res=>{
               
                 if(res.code==200){
                    this.changeUserInfo(res.result)
                }else{
                    this.changeAppPhone(null)
                }
            })
        }
   
    },
    methods:{
        onClickRight(){
            this.$router.push({name:'edit'})
            
        },
        confirmLogou(){
             Dialog.confirm({
                title: '退出提示',
                message: '你确定要退出当前?',
            })
            .then(() => {
                localStorage.removeItem("server_token") 
                       this.changeAppPhone(null)
                     this.$router.push({name:'login'})

            })
            .catch(() => {
                // on cancel
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.logout-btn{
    width:100%;
    margin:10px auto;
}
.abcd{
    width: 100%;
    margin-top: 20px;
    img{
        width: 100%;
    }
}
.my{
    width: 100%;
    height: 100%;
    
    .bj{
        width: 100%;
        height: 200px;
        padding: 20px;
        position: relative;
        background: orangered;
        .m-bj{
            width: 100%;
            margin-top: 20px;
            display: flex;
                img{
                    width: 70px;
                    height: 70px;
                    } 
            .bianji{
                padding: 10px;
                margin-left: 20px;
                color: #fff;
                a{
                    display: block;
                    margin-top: 10px;
                    text-decoration: none;
                    color: #fff;
                    width: 60px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border: 1px solid #fff;
                    border-radius: 10px;
                }
            }
            
        }
        .nums{
                width: 100%;
                display: flex;
                color: #fff;
                margin-top: 40px;
                div{
                    flex: 1;
                    text-align: center;
                }
            }
       .van-nav-bar{
            background: none;
            border: none;
        }
        .icon-right{
            position: absolute;
            right: 20px;
            top: 20px;
            color: #fff;
            font-size: 20px;
        }
    }
}
</style>